<div>

  <div class="demo-badge">
    <h3>Buttons</h3>
    <button matButton="outlined" matBadge="7" matBadgeDescription="7 unread messages">
      Inbox
    </button>

    <button matButton="outlined" matBadge="7" matBadgePosition="below after"
        matBadgeDescription="7 unread messages">
      Inbox
    </button>

    <button matButton="outlined" matBadge="7" disabled matBadgeDisabled
        matBadgeDescription="7 unread messages">
      Inbox
    </button>

    <button matButton="outlined" matBadge="7" matBadgeColor="accent"
        matBadgeDescription="7 unread messages">
      Inbox
    </button>
  </div>

  <div class="demo-badge">
    <h3>Icons</h3>
    <mat-icon [matBadge]="badgeContent" matBadgeDescription="This is a home indicator">
      home
    </mat-icon>

    <mat-icon color="primary" matBadge="22" matBadgePosition="below after" matBadgeColor="accent">
      home
    </mat-icon>

    <mat-icon color="primary" matBadge="22" matBadgePosition="above before" matBadgeColor="warn">
      home
    </mat-icon>

    <mat-icon color="primary" matBadge="22" matBadgePosition="below before">
      home
    </mat-icon>
  </div>

   <div class="demo-badge">
    <h3>Size</h3>
    <mat-icon [matBadge]="badgeContent" matBadgeSize="small">
      home
    </mat-icon>
    <mat-icon [matBadge]="badgeContent" matBadgeSize="large">
      home
    </mat-icon>

  </div>

  <div class="demo-badge">
    <h3>Text</h3>
    @if (visible) {
      <span [matBadge]="badgeContent" matBadgeOverlap="false">Hello</span>
    }

    <span matBadge="11111" matBadgeOverlap="false">
      Hello
    </span>

    <span matBadge="22" matBadgeOverlap="false" matBadgePosition="below after" matBadgeColor="accent">
      Hello
    </span>

    <span matBadge="22" matBadgeOverlap="false" matBadgePosition="above before" matBadgeColor="warn">
      Hello
    </span>

    <span matBadge="⚡️" matBadgeOverlap="false" matBadgePosition="below before">
      Hello
    </span>

    <span [matBadge]="badgeContent" matBadgeDescription="I've got {{badgeContent}} problems">
      Aria
    </span>

    <span [matBadge]="badgeContent" matBadgeHidden="true">
      Hidden
    </span>

    <input type="text" [(ngModel)]="badgeContent" />
    <button (click)="visible = !visible">Toggle</button>
  </div>

</div>
